<template>
<div>
  <div class="header">
    社区团购系统
    <span class="logout" @click="logout">退出登录</span>
  </div>
  <ul id="nav">
    <li @click="$router.push('/')">首页</li>
    <li @click="$router.push(`/details/0`)">商品信息</li>
    <li @click="$router.push('/chat')">交流模块</li>
    <li @click="$router.push('/userinfo')">个人中心</li>
    <li @click="$router.push('/cart')">购物车</li>
    <li @click="$router.push('/adminlogin')">后台管理</li>
  </ul>
  <router-view/>
</div>
</template>

<script>

export default {
  name: "Home",
  data() {
    return {}
  },
  mounted() {
    this.menuBindStyle()
  },
  watch: {
    "$route": "menuBindStyle"
  },
  methods: {
    menuBindStyle() {
      function removeActiveClass(node) {
        node.className = ''
      }
      let menus = document.querySelectorAll('#nav li')
      Array.prototype.forEach.call(document.querySelectorAll('#nav li'), removeActiveClass);
      let routerPath = this.$route.path
      if (routerPath.indexOf('/details')!==-1) {
        routerPath = '/details'
      }
      const path = ['/homepage','/details','/chat','/userinfo','/cart','/adminlogin']
      menus[path.indexOf(routerPath)].className = 'active'
      // menus.forEach(function (value, index) {
      //   value.addEventListener('click', function (e) {
      //     const target = e.target;
      //     Array.prototype.forEach.call(document.querySelectorAll('#nav li'), removeActiveClass);
      //     target.className = 'active';
      //   })
      // })
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped lang="less">
.header {
  height: 50px;
  background-color: #4d4552;
  line-height: 50px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  .logout {
    float: right;
    font-size: 14px;
    margin-right: 10px;
    cursor: pointer;
  }
}
ul{
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  list-style: none;
  background-color: #b7a8a1;
}
ul > li {
  padding: 6px 16px;
  margin: 0 5px;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}
ul > li:last-child{
  border-right: none;
}
li:hover, li:focus, .active {
  color: #fff;
  border-bottom: 1px solid #fff;
}

</style>
